<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2015/9/1 0001
  Time: 上午 10:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>

<html>
<head>
    <title>给教师绑定学生与课程</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <%--<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">--%>
    <link href="/static/bui/css/bs3/dpl.css" rel="stylesheet" type="text/css"/>
    <link href="/static/bui/css/bs3/bui.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="demo-content">
    <style type="text/css">
        .btns {
            margin-top: 20px;
        }

        .button {
            margin-bottom: 0px;
        }

        .bui-select-list {
            overflow: auto;
        }
    </style>


    <div style="width:100px;margin-left:100px;margin-top:10px">
        <div class="row">
            <label class="control-label" style="float:left;margin-top:50px;margin-left:0px"><b>教师信息：</b></label>
        </div>
        <div class="row">
            <div class="control-group span8">
                <label class="control-label" style="margin-left: 30px"><b>姓名：</b></label>${teacher.name}
            </div>
            <div class="control-group span8">
                <label class="control-label" style="margin-left: 30px"><b>电话：</b></label>${teacher.phone}
            </div>
            <div class="control-group span8">
                <label class="control-label" style="margin-left: 30px"><b>支付宝：</b></label>${teacher.alipay}
            </div>
            <div class="control-group span8">
                <label class="control-label" style="margin-left: 30px"><b>银行账户：</b></label>${teacher.bank_num}
            </div>
            <div class="control-group span8">
                <label class="control-label" style="margin-left: 30px"><b>开户行：</b></label>${teacher.bank}
            </div>
        </div>
    </div>
    <div class="row">
        <div id="list1" class="span5" style="margin-top:100px;margin-left: 80px">
            <span><b>可绑定的课程：</b></span>
        </div>
        <div class="btns centered span2">
            <button class="button button-small" type="button" id="J_BtnRight" style="margin-top:140px">>></button>
            <button class="button button-small" type="button" id="J_BtnLeft" style="margin-top:140px"><<</button>
        </div>

        <div id="list2" class="span5" style="margin-top:100px">
            <span><b>已绑定课程：</b></span>
        </div>
        <div id="list3" class="span5" style="margin-top:100px;margin-left: 50px">
            <span><b>可绑定学生：</b></span>
        </div>
        <div class="btns centered span2">
            <button class="button button-small" type="button" id="J_BtnRight1" style="margin-top:140px">>></button>
            <button class="button button-small" type="button" id="J_BtnLeft1" style="margin-top:140px"><<</button>
        </div>

        <div id="list4" class="span5" style="margin-top:100px">
            <span><b>已绑定学生：</b></span>
        </div>
        <script type="text/javascript" src="/static/bui/js/jquery-1.8.1.min.js"></script>
        <script type="text/javascript" src="/static/bui/js/bui.js"></script>
        <script type="text/javascript" src="/static/bui/js/config.js"></script>
        <script type="text/javascript" src="/static/js/sea.js"></script>
        <script type="text/javascript" src="/static/js/cxdate.js"></script>
        <script type="text/javascript">

            BUI.use(['bui/list', 'bui/overlay'], function (List, overlay) {

                var items1 = [
                            <c:forEach items="${noLessons}" var="nr">
                            {text: '${nr.name}', _id: '${nr._id}'},
                            </c:forEach>
                        ],
                        items2 = [
                            <c:forEach items="${lessons}" var="r">
                            {text: '${r.name}', _id: '${r._id}'},
                            </c:forEach>
                        ],
                        items3 = [
                            <c:forEach items="${noStudents}" var="nr">
                            {text: '${nr.name}', _id: '${nr._id}'},
                            </c:forEach>
                        ],
                        items4 = [
                            <c:forEach items="${students}" var="r">
                            {text: '${r.name}', _id: '${r._id}'},
                            </c:forEach>
                        ],
                        list1 = new List.Listbox({
                            elCls: 'bui-select-list',//默认是'bui-simple-list'
                            render: '#list1',
                            items: items1,
                            height: 350
                        }),
                        list2 = new List.Listbox({
                            elCls: 'bui-select-list',//默认是'bui-simple-list'
                            render: '#list2',
                            items: items2,
                            height: 350
                        }),
                        list3 = new List.Listbox({
                            elCls: 'bui-select-list',//默认是'bui-simple-list'
                            render: '#list3',
                            items: items3,
                            height: 350
                        }),
                        list4 = new List.Listbox({
                            elCls: 'bui-select-list',//默认是'bui-simple-list'
                            render: '#list4',
                            items: items4,
                            height: 350
                        });
                list1.render();
                list2.render();
                list3.render();
                list4.render();
                $('#J_BtnRight').on('click', function () {
                    var selections1 = list1.getSelection();
                    list1.removeItems(selections1);
                    var ids = [];
                    BUI.each(selections1, function (item) {
                        ids.push(item._id)
                    });
                    if (ids.length) {
                        $.ajax({
                            type: 'POST',
                            url: '/teacher/bindLesson?teacherId=${teacher._id}&_ids=' + ids,
                            success: function (msg) {
                                if (msg == 'success') {
                                    msg = "绑定课程成功！";
                                }
                                list2.addItems(selections1);
                                BUI.Message.Show({
                                    msg: msg,
                                    icon: 'success',
                                    buttons: [],
                                    autoHide: true,
                                    autoHideDelay: 1000
                                });
                            }
                        })
                    }
                });
                $('#J_BtnLeft').on('click', function () {
                    var selections2 = list2.getSelection();
                    list2.removeItems(selections2);
                    var ids = [];
                    BUI.each(selections2, function (item) {
                        ids.push(item._id)
                    });
                    if (ids.length) {
                        $.ajax({
                            type: 'POST',
                            url: '/teacher/removeLesson?teacherId=${teacher._id}&_ids=' + ids,
                            success: function (msg) {
                                if (msg == 'success') {
                                    msg = "解除课程成功！";
                                }
                                list1.addItems(selections2);
                                BUI.Message.Show({
                                    msg: msg,
                                    icon: 'success',
                                    buttons: [],
                                    autoHide: true,
                                    autoHideDelay: 1000
                                });
                            }
                        })
                    }
                });
                $('#J_BtnRight1').on('click', function () {
                    var selections1 = list3.getSelection();
                    list3.removeItems(selections1);
                    var ids = [];
                    BUI.each(selections1, function (item) {
                        ids.push(item._id)
                    });
                    if (ids.length) {
                        $.ajax({
                            type: 'POST',
                            url: '/teacher/bindStudent?teacherId=${teacher._id}&_ids=' + ids,
                            success: function (msg) {
                                if (msg == 'success') {
                                    msg = "绑定学生成功！";
                                }
                                list4.addItems(selections1);
                                BUI.Message.Show({
                                    msg: msg,
                                    icon: 'success',
                                    buttons: [],
                                    autoHide: true,
                                    autoHideDelay: 1000
                                });
                            }
                        })
                    }
                });
                $('#J_BtnLeft1').on('click', function () {
                    var selections2 = list4.getSelection();
                    list4.removeItems(selections2);
                    var ids = [];
                    BUI.each(selections2, function (item) {
                        ids.push(item._id)
                    });
                    if (ids.length) {
                        $.ajax({
                            type: 'POST',
                            url: '/teacher/removeStudent?teacherId=${teacher._id}&_ids=' + ids,
                            success: function (msg) {
                                if (msg == 'success') {
                                    msg = "解除学生成功！";
                                }
                                list3.addItems(selections2);
                                BUI.Message.Show({
                                    msg: msg,
                                    icon: 'success',
                                    buttons: [],
                                    autoHide: true,
                                    autoHideDelay: 1000
                                });
                            }
                        })
                    }
                });
            });

        </script>
    </div>
</div>
</body>
</html>
